<template>
    <el-tree
    :data="data"
    node-key="id"
    :default-expanded-keys="['1']"
    :accordion="true"
    :props="props">
        <span class="custom-tree-node" slot-scope="{node}" @click="nodeClick(node)">
            <el-tooltip effect="light" :content="node.label" placement="right" :disabled="node.level===1" :visible-arrow="false">
                <span :class="{'children-level':node.level===2}">{{node.label}}</span>
            </el-tooltip>
        </span>
    </el-tree>
</template>
<script>
export default {
  props: ['data', 'props'],
  mounted () {
    this.$nextTick(() => {
      this.clickNode()
    })
  },
  methods: {
    nodeClick (node) {
      if (node.level === 1) return false
      this.$router.push(node.data.path)
    },
    clickNode () {
      const CurrentClickParent = document.querySelector('.is-expanded>.el-tree-node__children')
      const CurrentClickChild = CurrentClickParent.children[0]
      CurrentClickChild.click()
    }
  }
}
</script>
<style lang="less" scoped>
.el-tree{
    font-size: 16px;
    color: @color_gray_2;
}
/deep/ .el-tree-node.is-expanded{
    color: @color_gray_1;
}
/deep/ .el-tree-node__children{
    font-size: 14px;
    cursor: pointer;
    color: @color_blue_3;
}
/deep/ .el-tree-node__children>.is-current{
    color: @color_blue_2;
    text-decoration: underline;
}
/deep/ .el-tree-node__content{
    display: flex;
}
/deep/ .el-tree-node__content>.custom-tree-node{
    flex-grow: 1;
    overflow: hidden;
}
/deep/ .children-level{
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

</style>
<style lang="less">
.el-tooltip__popper{
    .tooltip();
}
</style>
